<template>
  <div class="Cart" v-if="ishow">
    <div class="title">
      <van-icon name="home-o" />
      <div class="name">购物车</div>
      <div class="other">...</div>
    </div>
    <div class="label">
      <div class="label_item">
        <div class="item">
          <van-icon name="certificate" />
          <span>100%正品保证</span>
        </div>
        <div class="item">
          <van-icon name="certificate" />
          <span>所有商品精挑细选</span>
        </div>
        <div class="item">
          <van-icon name="certificate" />
          <span>售后无忧</span>
        </div>
      </div>
      <div class="count">
        <span class="mycount">购物数量:</span>
        <p>{{ this.$store.state.Count }}</p>
      </div>
      <Cartitem></Cartitem>
    </div>

    <van-submit-bar :price="Price" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allchecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
const Cartitem = () => import("@/components/Littlecom/Cartitem.vue");
export default {
  name: "FxhDemoCartView",
  components: {
    Cartitem,
    
  },
  computed: {
     Price () {
    return this.$store.getters.newTotal;
  }
  },
  provide() {
    return {
      reload: this.reload,
      TotalPrice:true,
    };
  },
  data() {
    return {
      ishow: true,
      TotalPrice:null,//总价
      allchecked:true,//全选
    };
  },
  async created() {
  
    const {
      data: { data: data },
    } = await this.$request("get", "/fxh/cart/count", {
      numType: true,
      type: "sum",
    });
    this.$store.commit("setCount", data.count);
  },
  mounted() {},

  methods: {
    reload() {
      //局部刷新
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
    },
    onSubmit(){
      console.log(提交);
    }
  },
};
</script>

<style lang="scss" scoped>
.Cart {
  width: 375px;
  height: 87vh;
  overflow: hidden;
  .title {
    padding: 10px;
    @include between;
    align-items: center;
    background: #ff448f;
    .name {
      line-height: 28px;
      color: #fff;
      font-size: 17px;
      text-align: center;
      margin: auto;
    }
    .van-icon {
      color: #fff;
    }
    .other {
      margin-top: -12px;
      color: #fff;
      text-align: center;
      font-size: 16px;
    }
  }
  .label_item {
    box-sizing: border-box;
    @include around;
    width: 375px;
    height: 88px;
    background: #ff448f;
    padding-top: 14px;
    .item {
      font-size: 10px;
      margin-right: 4px;
      color: #fff;
    }
  }
  .count {
    @include flex;
    align-items: center;
    padding-left: 10px;
    width: 345px;
    height: 44px;
    background: #fff;
    margin-left: 15px;
    margin-top: -44px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    .mycount {
      font-size: 13px;
      color: #282828;
    }
    p {
      font-size: 13px;
      color: #ff448f !important;
    }
  }

  .van-submit-bar {
    width: 373px;
    height: 49px;
    margin-bottom: 50px;
  }
}
</style>
